<template>
  <div class="app-container" ref="appContainer">
    <PropTable
      ref="tableData"
      :loading="loading"
      :columns="column"
      :data="data"
      @reset="reset"
      @onSubmit="onSubmit"
      :unadd="false"
    >
    </PropTable>
  </div>
</template>
<script lang="ts" setup name="comprehensive">
  import { ref, onMounted } from 'vue'
  import { postPaymentProductSearch } from '@/api/controller/payment-product-controller/index'
  const loading = ref(true)
  const appContainer = ref(null)
  import PropTable from '@/components/Table/PropTable/index.vue'

  const column = [
    {
      label: '产品名称',
      name: 'productName',
      inSearch: true,
      valueType: 'input',
      width: '180',
    },
    { label: '规格型号', name: 'productModel', inSearch: true, valueType: 'input', width: '130' },
    { label: '制造商品牌', name: 'productBrand', inSearch: true, valueType: 'input', width: '130' },
    { label: '项目简称', name: 'projectBrief', inSearch: true, valueType: 'input' },
    { label: '合同名称', name: 'contractName', inSearch: true, valueType: 'input' },
    { label: '数量', name: 'productNumber', width: '80' },
    { label: '单位', name: 'productUnit', width: '60' },
    { label: '单价(元)', name: 'productPrice', width: '110', moneyType: true },
    { label: '总价(元)', name: 'productWholePrice', width: '110', moneyType: true },
  ]
  const data = ref(null)
  const tableData = ref(null)

  //重置搜索条件
  const reset = async () => {
    try {
      loading.value = true
      let pageInfo = {
        pageNum: 1,
        pageSize: 15,
      }
      const result = await postPaymentProductSearch(pageInfo)
      data.value = result.data
    } finally {
      loading.value = false
    }
  }
  //搜索
  const onSubmit = async (val) => {
    try {
      loading.value = true
      const result = await postPaymentProductSearch(val)
      data.value = result.data
    } finally {
      loading.value = false
    }
  }
  //初始化
  onMounted(async () => {
    try {
      loading.value = true
      let pageInfo = {
        pageNum: 1,
        pageSize: 15,
      }
      const result = await postPaymentProductSearch(pageInfo)
      data.value = result.data
    } finally {
      loading.value = false
    }
  })
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
